<template>
    <div>
        <mt-header :title="saveType | titles">
            <router-link to slot="left">
                <mt-button @click="popupVisible =! popupVisible" class="fa fa-bars circle"></mt-button>
            </router-link>
            <mt-button slot="right">
                <p>会员：{{user.account}} 余额：{{user.balance}}</p>
            </mt-button>
        </mt-header> 
        <mt-navbar v-model="selected">
            <mt-tab-item @click.native="$router.push({path:'/rule'})" id="1">规则</mt-tab-item>
            <mt-tab-item @click.native="$router.push({path:'/lottery'})" id="2">开奖</mt-tab-item>
            <mt-tab-item @click.native="$router.push({path:'/fastFight'})" id="3">快打</mt-tab-item>
            <mt-tab-item @click.native="$router.push({path:'/fastSelect'})" id="4">快选</mt-tab-item>
            <mt-tab-item @click.native="$router.push({path:'/detail'})" id="5">明细</mt-tab-item>
            <!-- <mt-tab-item id="6">日志</mt-tab-item> -->
        </mt-navbar>
        <div v-if="openTimes==100?true:false" class="times">距离 {{msg.issue}} 期封盘还有：{{msg.time}}</div>
        <div v-if="openTimes<90?true:false" class="times">距离 {{msg.issue}} 期开奖还有：{{msg.time}}
            <span v-if="openTimes>0?true:false"> {{openTimes}}秒</span>
           </div>
        <mt-popup v-model="popupVisible" position="left">
            <div class="nav">
                <div class="nav-top">
                    <mt-cell :title="user.nickname" :label="'会员：'+user.account+'余额：' +user.balance"></mt-cell>
                </div>
                <el-radio-group class="types" size="mini" v-model="type">
                    <el-radio-button
                        @click.native="getType(v.code)"
                        v-for="(v,i) in modules"
                        :key="i"
                        :label="v.code"
                    >{{v.value}}</el-radio-button>
                </el-radio-group>
                <mt-tab-container-item>
                    <mt-cell
                        @click.native="$router.push({path:'/history'});popupVisible=false;selected=''"
                        title="历史账单"
                    />
                    <mt-cell
                        @click.native="$router.push({path:'/daily'});popupVisible=false;selected=''"
                        title="日报表"
                    />
                    <!-- <mt-cell title="周报表" /> -->
                    <mt-cell
                        @click.native="$router.push({path:'/monthly'});popupVisible=false;selected=''"
                        title="月报表"
                    />
                    <mt-cell
                        @click.native="$router.push({path:'/personal'});popupVisible=false;selected=''"
                        title="个人资料"
                    />
                    <mt-cell title="电脑版" />
                    <!-- <mt-cell title="修改密码" /> -->
                    <mt-cell @click.native="logout" title="登出" />
                </mt-tab-container-item>
            </div>
        </mt-popup>
    </div>
</template>

<script>
import { mapState } from "Vuex";
export default {
    data() {
        return {
            type: "1",
            selected: "",
            popupVisible: false,
            msg: {},
            msg2: {}
        };
    },
    created() {
        console.log(this.user)
        this.getUserMsg();
        this.getCur();
        this.type = this.saveType;
    },
    watch: {
        // saveType() {
        //     this.getCur();
        // }
    },
    computed: {
        ...mapState(["user", "modules", "saveType", "showType","openTimes"])
    },
    methods: {
        getUserMsg(){
            this.$api.post(this.$url.getInfo,'',res=>{
                console.log(res.data,666)
                this.$store.commit('getUser',JSON.stringify(res.data.data))
            })
        },
        getType(val) {
            this.$store.commit("saveType", val);
        },
        logout() {
            localStorage.clear();
            this.$router.push({ path: "/" });
            // this.$api.post(this.$url.logout,'',res=>{
            //     console.log(res.data)
            //     if(res.data.code==200){
            //         localStorage.clear();
            //         this.$router.push({path:'/'})
            //     }
            // })
        },
        getCur() {
            this.$api.post(
                this.$url.current,
                {
                    module: this.saveType
                },
                res => {
                    this.msg = res.data.data;
                    this.$store.commit(
                        "currentMsg",
                        JSON.stringify(res.data.data)
                    );         
                    if (this.msg.closeSeconds == 90) {
                        this.getUserMsg();
                        this.$store.commit("openTime", 100);
                        var time1 = setInterval(() => {
                            var minutes = Math.floor(this.msg.secondes / 60);
                            var seconds = Math.floor(this.msg.secondes % 60);
                            var msg = minutes + "分" + seconds + "秒";
                            --this.msg.secondes;
                            if (this.msg.secondes <= 0) {
                                clearInterval(time1);
                                this.getCur();
                            }
                            this.$set(this.msg, "time", msg);
                        }, 1000);
                    } else if (0 <= this.msg.closeSeconds <= 89) {
                        this.$set(this.msg, "time");
                        this.$store.commit("chaneShow", 2);
                        this.getCur2();
                        var time2 = setInterval(() => {
                            this.msg2.closeSeconds--;
                            this.$store.commit(
                                "openTime",
                                this.msg2.closeSeconds
                            );
                            if (this.msg2.closeSeconds <= 0) {  
                                clearInterval(time2);
                                this.$store.commit("chaneShow", 1);
                                this.getCur();
                            }
                        }, 1000);
                    } else if (this.msg.closeSeconds < 0) {
                        setTimeout(() => {
                            this.getCur();
                        }, 2000);
                    }
                }
            );
        },
        getCur2() {
            this.$api.post(
                this.$url.current,
                {
                    module: this.saveType
                },
                res => {
                    this.msg2 = res.data.data;
                }
            );
        }
    },
    filters: {
        titles(val) {
            if (val == 1) {
                return "河内5分彩";
            } else if (val == 2) {
                return "澳5七星彩";
            }
        }
    }
};
</script>

<style lang='less' scoped>
.circle {
    font-size: 20px;
    // border: 1px solid #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 22px;
}
.nav {
    width: 200px !important;
    height: 100vh;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
}
.types {
    margin-top: 10px;
}
.times {
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    width: 100%;
    border-top: 1px solid #eee;
    background-color: #fff;
}
/deep/.mint-header-title {
    font-weight: bold;
    font-size: 16px;
    color: yellow;
}
</style>
